<template>
    <nly-row class="col-12 DynamicCondition dynamic-condition-gw mb-2" v-show="show">
        <nly-col xs="12" sm="12" md="12" lg="12" xl="12"  class="form-inline " style="justify-content: left;">
            
            <div v-for="(item) in DynamicConditionData" :key="item.id">
                <input-group-search v-if="item.type == '搜索选择'"
                    :title="item.name"
                    :modalTitle="'选择'+item.name"
                    labelStyle=""
                    :rightStyle="rightStyle"
                    :checkable="checkable"
                    class="ml-1 mb-2"
                    :treeType="item.val"
                    v-model="item.value"
                    @input="updateItem(item.dataIndex,item)"
                ></input-group-search>
                <form-input v-if="item.type == '文本' || item.type == '快速文本'"
                    :title="item.name"
                    labelStyle=""
                    :rightStyle="rightStyle"
                    class="ml-1 mb-2"
                    v-model="item.value"
                    :placeholder="item.code == 'phonetic' ?'客户名称首拼' :''"
                    @input="updateItem(item.dataIndex,item)"
                ></form-input>
                <form-select v-if=" item.type == '下拉' || item.type == '性别' "
                    :title="item.name"
                    labelStyle=""
                    showSearch
                    :rightStyle="rightStyle"
                    addDefaultText="全部"
                    class="ml-1 mb-2"
                    size="small"
                    v-model="item.value"
                    :dataList="valForFormFN(item.val)"
                    @input="updateItem(item.dataIndex,item)"
                    >
                </form-select>
                <form-select v-if=" item.type == '下拉选择' "
                    :title="item.name"
                    labelStyle=""
                    showSearch
                    :rightStyle="rightStyle"
                    addDefaultText="全部"
                    class="ml-1 mb-2"
                    size="small"
                    v-model="item.value"
                    :dataList="JSON.parse(item.val)"
                    @input="updateItem(item.dataIndex,item)"
                    >
                </form-select>
                <form-radio v-if="item.type == '单选'"
                    :title="item.name"
                    labelStyle=""
                    :rightStyle="rightStyle"
                    class="ml-1 mb-2"
                    size="small"
                    v-model="item.value"
                    :keyPre="getOnlyCode(item)"
                    :dataList="valForFormFN(item.val)"
                    @input="updateItem(item.dataIndex,item)"
                    >
                </form-radio>
                <form-check-box v-if="item.type == '复选'"
                    :title="item.name"
                    labelStyle=""
                    :rightStyle="rightStyle"
                    class="ml-1 mb-2"
                    v-model="item.value"
                    :dataList="valForCheckBoxFN(item.val)"
                    @input="updateItem(item.dataIndex,item)"
                >
                </form-check-box>
                <form-radio v-if="item.type == '是否'"
                    :title="item.name"
                    labelStyle=""
                    :rightStyle="rightStyle"
                    class="ml-1 mb-2"
                    v-model="item.value"
                    :keyPre="getOnlyCode(item)"
                    :dataList="[
                        { key: item.dataType == 1 ? true : '是', title: '是' },
                        { key: item.dataType == 1 ? false : '否', title: '否' }
                    ]"
                    @input="updateItem(item.dataIndex,item)"
                ></form-radio>
                <form-rang-date-picker v-if="item.type == '日期'"
                    :title="item.name"
                     size="small"
                    labelStyle=""
                    :rightStyle="rangDaterightStyle"
                    format="YYYY-MM-DD"
                    class="ml-1 mb-2"
                    v-model="item.rangDateVal"
                    @input="updateItem(item.dataIndex,item)"
                ></form-rang-date-picker>
                <form-rang-date-picker v-if="item.type == '时间'"
                    :title="item.name"
                     size="small"
                    labelStyle=""
                    :rightStyle="rangDaterightStyle"
                    class="ml-1 mb-2"
                    show-time
                    format="YYYY-MM-DD HH:mm:ss"
                    v-model="item.rangDateVal"
                    @input="updateItem(item.dataIndex,item)"
                ></form-rang-date-picker>
                <form-input-number v-if="item.type == '整数'"
                    :title="item.name"
                    labelStyle=""
                    :rightStyle="rightStyle"
                    class="ml-1 mb-2"
                    :precision="0"
                    :min="item.val ? 0 : -Infinity"
                    v-model="item.value"
                    @input="updateItem(item.dataIndex,item)"
                ></form-input-number>
                <form-input-number v-if="item.type == '小数'"
                    :title="item.name"
                    labelStyle=""
                    :rightStyle="rightStyle"
                    class="ml-1 mb-2"
                    :precision="0.1"
                    v-model="item.value"
                    @input="updateItem(item.dataIndex,item)"
                ></form-input-number>
            </div>
            <!-- <div class="form-group FormRangeDataPicker ml-1 mb-2">
                <label style="font-weight: normal; justify-content: flex-end; padding-left: 5px; width: 110px; text-align: right;">是否关注：</label>
                <div class="myRightClass">
                    <a-select default-value="" v-model="isCollected" style="width: 150px" size="small" @change="handleChange">
                        <a-select-option value="">
                            全部
                        </a-select-option>
                        <a-select-option value="1">
                            是
                        </a-select-option>
                        <a-select-option value="0">
                            否
                        </a-select-option>
                    </a-select>
                </div>
            </div> -->
        </nly-col>
    </nly-row>
</template>

<script>

import {valForFormFN,valForCheckBoxFN,getOnlyCode,initGroupSearchDefaultVal} from "@/utils/customize"
import { mapState } from "vuex";
export default {
    name:"DynamicCondition",
    props:{
        conditions:{
            type: Array,
            default:()=>[]
        },
        rightStyle:{
            type: String,
            default: "width:120px;"
        },
        rangDaterightStyle:{
            type: String,
            default: "width:230px;display: flex;"
        },
        checkable:{  //是否多选
            type:Boolean,
            default:false,
        },
        show:{
            type: Boolean,
            default: false
        },
        //固定查询条件的key
        FixedConditionKeys:{
            type: Array,
            default: ()=>[]
        },
    },
    data(){
        return{
            valForFormFN,
            valForCheckBoxFN,
            getOnlyCode,
            initGroupSearchDefaultVal,
            isCollected:'',//是否关注
        }
    },
    created(){
         console.log("created->搜索组件...",this.conditions);
    },
    mounted(){
        console.log("mounted->搜索组件...",this.conditions);
    },
    computed:{
         DynamicConditionData:function(){
            const {conditions,FixedConditionKeys} = this;
            let d = new Array();
            conditions.forEach((f,index)=>{
                if(!(f.dataType == 1 && FixedConditionKeys.includes(f.code))){
                    f.dataIndex = index;
                    d.push(f);
                }
            });
            console.log("DynamicConditionData",d)
            return d;
        },
        ...mapState({
            isCollectedState: state => state.order.isCollected,
        }),
    },
  
    methods:{
        //强制更新 数组 对象，并进行试图渲染
        updateItem(index,item){
            console.log("动态条件 值变动",item);
            this.$set(this.conditions,index,item);
        },
        handleChange(){
            //是否关注改变
            this.$store.commit('SET_ISCOLLECTED',this.isCollected);
        },
    },
    watch:{
        conditions:{
            handler(newName, oldName) {
                console.log('动态条件_conditions_变动');
                this.isCollected = this.isCollectedState;
            },
            immediate: true,
            deep: true
        }
    }
}
</script>

<style lang="less">
.DynamicCondition{
    .ant-radio-wrapper{
        font-size: 1rem !important;
        padding: 0 !important;
        span.ant-radio + * {
        padding-right: 4px !important;
        padding-left: 0px !important;
        }
    }   
}
.dynamic-condition-gw{
    height:100%;
    // overflow-y: auto;
}

</style>